<template>
    <div class="tk_view_box">
        <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
            <i class="el-icon-caret-right"></i>
            <div class="tk_view_left">
                <div class="tk_view_title">广告创意</div>
                <div class="tk_view_num">创意素材数量 x {{tableData.length}}</div>
            </div>
        </div>
        <div class="tk_view_content" v-if="is_show">
            <el-table :data="tableData" max-height="340" class="view_table" ref="multipleTable">
                <el-table-column prop="creaname" label="创意组名称"></el-table-column>
                <el-table-column prop="creatives" label="创意素材数量">
                    <template slot-scope="scope">
                        {{scope.row.creatives.length}}
                    </template>
                </el-table-column>
                <el-table-column prop="item_group_ids" label="商品数量">
                    <template slot-scope="scope">
                        {{scope.row.item_group_ids.length}}
                    </template>
                </el-table-column>
                <el-table-column prop="call_to_action" label="行动引导文案">
                    <template slot-scope="scope">
                        {{call_to_action[scope.row.call_to_action]}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            is_show: false,
            tableData: [],
            call_to_action: {
                APPLY_NOW: "立即申请",
                BOOK_NOW: "立即预约",
                ORDER_NOW: "立即下单",
                CONTACT_US: "联系我们",
                EXPERIENCE_NOW: "立即体验",
                GET_QUOTE: "查看价格",
                INTERESTED: "感兴趣",
                LEARN_MORE: "查看详情",
                PREORDER_NOW: "立即预定",
                SHOP_NOW: "去逛逛",
                VIEW_NOW: "立即查看",
                VISIT_STORE: "去附近商店看看",
                WATCH_NOW: "立即观看",
                WATCH_LIVE: "观看直播",
            },
        };
    },
    created() {
        this.tableData = this.dataForm.creatives_base.creatives_class;
    },
    methods: {
        getAgeText(list) {
            let text = [];
            if (list.length == 0) {
                text = ["不限"];
            } else {
                for (let i in this.ageList) {
                    for (let a in list) {
                        if (this.ageList[i].value == list[a]) {
                            text.push(this.ageList[i].label);
                        }
                    }
                }
            }
            return text.toString();
        },
    },
};
</script>


<style scoped>
.tk_view_box {
    margin-bottom: 10px;
}
.tk_view_top {
    height: 65px;
    padding: 0 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    cursor: pointer;
}
.tk_view_top .el-icon-caret-right {
    font-size: 18px;
    color: #616c85;
}
.tk_view_left {
    margin-left: 20px;
}
.tk_view_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_view_num {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.tk_view_content {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0;
    padding: 0 20px;
}
/deep/ .view_table.el-table th {
    background-color: #fff;
    font-weight: normal;
}
/deep/ .view_table.el-table th.is-leaf {
    border-bottom: 1px solid #f1f2f3 !important;
}
/deep/ .view_table.el-table::before {
    display: none;
}
</style>

